<template>
	<div class="absolute inset-0 flex flex-col pt-5 px-[25px] md:px-[35px]">
		<account-avatar
			class="mx-auto"
			:face="face"
			:background="background"
			:width="100"
			:toProfile="false" />
		<n-tabs
			class="flex-auto overflow-auto flex flex-col mt-5"
			v-model:value="tab"
			size="large"
			animated
			justify-content="space-evenly"
			:bar-width="40"
			tab-class="h-11 !px-1"
			pane-wrapper-class="mt-[10px] p-3 rounded-lg bg-bg-3"
			pane-class="flex-1 grid grid-cols-4 md:grid-cols-5 gap-[14px] justify-between items-center place-items-center !p-0">
			<n-tab-pane :name="AvatarType.star" :tab="$t('avatar.star')">
				<account-avatar
					v-for="(item, index) in avatarData.faces.star"
					:key="index"
					class="account-avatar-item rounded-full cursor-pointer"
					:class="{ active: item === face }"
					:width="70"
					:face="item"
					:background="backgroundNone"
					:toProfile="false"
					@click="face = item" />
			</n-tab-pane>
			<n-tab-pane :name="AvatarType.other" :tab="$t('avatar.other')">
				<account-avatar
					v-for="(item, index) in avatarData.faces.others"
					:key="index"
					class="account-avatar-item rounded-full cursor-pointer"
					:class="{ active: item === face }"
					:width="70"
					:face="item"
					:background="backgroundNone"
					:toProfile="false"
					@click="face = item" />
			</n-tab-pane>
			<n-tab-pane :name="AvatarType.backgrounds" :tab="$t('avatar.backgrounds')">
				<account-avatar-bg
					v-for="(item, index) in avatarData.backgrounds"
					:key="index"
					class="account-avatar-item rounded-full cursor-pointer"
					:class="{ active: JSON.stringify(item) === JSON.stringify(background) }"
					:width="70"
					:data="item"
					@click="background = item" />
			</n-tab-pane>
		</n-tabs>
		<base-button
			class="mt-5 mb-10"
			type="primary"
			textT="action.submit"
			:loading="loading"
			@click="save" />
	</div>
</template>

<script lang="ts" setup>
import { NTabPane, NTabs } from 'naive-ui'
import { AccountAvatar, AccountAvatarBg } from '@/components/account/'
import { BaseButton } from '@/components/base'
import { useProfileStore } from '@/store'
import { AvatarBackground } from '@/types'
import { AvatarType } from './types'
import { ref, watch } from 'vue'
import { updateAvatar } from '@/api/profile'
import { useRequest } from '@/hooks'
import { avatarData } from './avatar-data'

const emits = defineEmits(['back'])
const profileStore = useProfileStore()
const tab = ref(AvatarType.star)
const face = ref('')
const background = ref<AvatarBackground | null>(null)
const backgroundNone = <AvatarBackground>{ f: ['#fff', ''], t: ['#000', ''] }

const { run, loading } = useRequest(updateAvatar, {
	showSuccess: true,
	showError: true,
	onSuccess: () => {
		profileStore.getUserInfo()
		emits('back')
	}
})

const save = () => {
	run({
		avatar: {
			face: face.value,
			background: background.value
		}
	})
}

watch(
	() => profileStore.userInfo,
	() => {
		const avatar = profileStore.userInfo?.avatar
		if (avatar) {
			face.value = avatar?.face
			background.value = avatar?.background
		}
	},
	{ immediate: true }
)

defineExpose({ save })
</script>

<style scoped lang="scss">
.n-tabs {
	:deep(.n-tabs-pane-wrapper) {
		overflow: auto !important;
	}
}
.account-avatar-item {
	&.active,
	&:hover {
		outline: 2px white solid;
	}
}
</style>
